import Item from 'antd-mobile/es/components/dropdown/item'
import React ,{Suspense}from 'react'
import {BrowserRouter,Route,Routes,Navigate,useLocation} from "react-router-dom"
import {routerItem} from "../interface"
import routes from "./routes"

function index() {
    const BefroeEach=({children}:{children:JSX.Element|any})=>{
        const location=useLocation()
        const token=localStorage.getItem('token')
        if(!token&&location.pathname!=='/login'){
            return <Navigate to='/login'></Navigate>
        }
        return children
    }
    const mapRouter=(route:routerItem[])=>{
        return route.map((v,i)=>{
            return v.path?
                <Route key={i} path={v.path} element={<BefroeEach>{v.element}</BefroeEach>}>
                    {
                        v.children&&mapRouter(v.children)
                    }
                </Route>
                :<Route key={i} path={v.from} element={<Navigate to={v.to} />}></Route>
        })
    }
    return (
        <Suspense fallback={<h1>加载中.....</h1>}>
            <BrowserRouter>
                <Routes>
                    {
                        mapRouter(routes)
                    }
                </Routes>
            </BrowserRouter>
        </Suspense>
    )
}

export default index
